let path = require('path');
let htmlWebpackPlugin = require("html-webpack-plugin");
let MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    mode:"development",
    devtool:'inline-source-map',
    entry:path.join(__dirname,"./src/common/main.js"),
    output:{
        path:path.join(__dirname,"./asset"),
        filename:"[name].[hash].js",
        chunkFilename:'[hash].[name].chunk.js'
    },
    module:{
        rules:[
            {test:/\.js$/,exclude:/node_modules/,loader:"babel-loader"},
            {
                test:/\.vue$/,
                loader:'vue-loader',
                options:{
                    loaders:{
                        css:[
                            'vue-style-loader',
                            {
                                loader:MiniCssExtractPlugin.loader,
                            },
                            {
                                loader:"css-loader",
                            }
                        ]
                    }
                }
            },
            {test:/\.css$/,use:[MiniCssExtractPlugin.loader,{loader:'css-loader'}]},
            {
                test:/\.less$/,
                use:[{
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:"../"
                        },
                    },
                    'css-loader',
                    'less-loader'
                ]
            },
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,
                use:[{
                    loader:"url-loader",
                    options:{
                        limit:10000,
                        name:'[name].[ext]'
                    }
                }]
            },
            {
                test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader:"url-loader",
                options:{
                    limit:10000,
                    publicPath:"./fonts"
                }
            },
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,"./index.html"),
            filename:"index.html"
        }),
        new MiniCssExtractPlugin({
            filename:"css/common.css"
        })
    ],
    resolve:{
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        }
    }
}